<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            border: 1px solid #ccc;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="div1" draggable="true">可拖拽</div>
</body>
<script>
  const div1 = document.getElementById('div1')
  // let timer = null
  // div1.addEventListener('drag', function (e) {
  //   if (timer) {
  //     return
  //   }
  //   timer = setTimeout(() => {
  //     console.log(e.offsetX, e.offsetY)
  //     timer = null
  //   }, 100)
  // })
  function throttle(fn, delay = 100) {
    let timer = null
    return function () {
      if (timer) {
        return
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments)
        timer = null
      }, delay)
    }
  }

  div1.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
  },200))
  //e传给了throttle返回的函数

</script>
</html>
